<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="edge_data.js"></script>
<style>
.hidden{
  display:none;
}
</style>
</head>
<body>
<script>
// This viewer was cobbled together based on a wide variety of examples found online
// Including https://bl.ocks.org/mbostock/1046712, https://github.com/d3/d3-chord,
// https://bl.ocks.org/emeeks/a1e48992be56681e3f93, and Mees Gelein's chord viewer at
// https://github.com/MGelein/comparativus/blob/master/js/vis.js

var fullwidth = 1600;
var width = 800
var height = 900;
var outerradius = Math.min(width-90, height-140) / 2;
var innerradius = outerradius - 20; 
// colors generated by tools.medialab.sciences-po.fr/iwanthue
var manycolors = ["#9b783a", "#6168d8","#5ab543","#a45bcd","#a7b242","#ca4faf","#67ba75","#da4b83","#49b39c","#cd4249","#4cbee0","#c95a2a","#6386d9","#d89e3d","#7b5a9f","#547836","#d28ecb","#da8571","#5e90c8","#a24c69"]
var usecolors = manycolors.slice(0, docs.length)
var cscale = d3.scaleLinear().domain([0, docs.length - 1]); 
var color = d3.scaleOrdinal(usecolors);

var svg = d3.select('body')
    .append('svg')
    .attr('width', fullwidth)
    .attr('height', height)
    .append('g')
    .attr('transform', 'translate(' + (width / 2) +
    ',' + (height / 2) + ')');

var arc = d3.arc()
    .innerRadius(innerradius)             
    .outerRadius(outerradius)

var pie = d3.pie()
    .value(function(d) { return d.len; })
    .sort(null);

var g = svg.selectAll('.arc')
    .data(pie(docs))
    .enter()
    .append('g');

g.append("path")
    .attr('d', arc)
    .attr('fill', function(d, i) { return color(cscale(i)) });

g.append("text")
    .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; })
    .attr("dy", ".35em")
    .attr("text-anchor","middle")
    .text(function(d) {return d.data.doc})

var textdata = {};

var angledata = d3.selectAll('path').data()

for (i=0; i < angledata.length;i++){
    angledata[i].scale = d3.scaleLinear().domain([0,angledata[i].value]).range([angledata[i].startAngle, angledata[i].endAngle])
    testscale = d3.scaleLinear().domain([0,angledata[i].value]).range([angledata[i].startAngle, angledata[i].endAngle])
}

var ribbon = d3.ribbon()
    .radius(innerradius);



let ribbondata = [];

for (i = 0; i < edges.length; i++) {
    let edge = edges[i]
    let edgedata = {}
    for (j = 0; j < angledata.length; j++) {
        if (edge.t1 == angledata[j].data.doc){
            edgedata.source = {startAngle:angledata[j].scale(edge.t1s),endAngle:angledata[j].scale(edge.t1e)}
            edgedata.origin = edge.t1
        }
        if (edge.t2 == angledata[j].data.doc){
            edgedata.target = {startAngle:angledata[j].scale(edge.t2s),endAngle:angledata[j].scale(edge.t2e)}
        }
    }
    edgedata.sourcetitle = edge.t1
    edgedata.targettitle = edge.t2
    edgedata.sourcequote = edge.t1q
    edgedata.targetquote = edge.t2q
    edgedata.sourcestart = edge.t1s
    edgedata.targetstart = edge.t2s
    ribbondata.push(edgedata)
}

let currentdata = 0;

let ribbongroup = g.append("g")
    .attr("class","ribbons")
    .selectAll("path")
    .data(ribbondata)
    .enter().append("path")
    .attr("d", ribbon)
    .style("stroke-opacity", 0.75)
    .style("fill-opacity",0.2)
    .style("stroke-width", "1px")
    .style("fill","magenta")
    .on("mouseover",function(){
        d3.select(this).style('fill-opacity', 0.9).transition()
    })
    .on("mouseout",function(){
        d3.select(this).style('fill-opacity',0.2).transition()
    })
    .on("click", function(d){
        currentdata = d
        charoffset = 0
        if (d.sourcequote.length < 75) {
            cos = d.sourcequote.length
        } else {
            cos = charoffset + 75
        }
        qa.text("Intertextuality ("+ charoffset+"-"+cos+" of "+ d.targetquote.length + " 字 alignment)")
        displayquote(d)
        // d3.select(ribbongroup).style('fill','magenta')
        // d3.select(this).style('fill','blue')

        })

function displayquote(d){
    if (d.sourcetitle.length > 14){
        t1.classed("hidden", false).text(d.sourcetitle.substring(0,14)+"...") 
    } else {
        t1.classed("hidden", false).text(d.sourcetitle) 
    }
    if (d.targettitle.length > 14){
        t2.classed("hidden", false).text(d.targettitle.substring(0,14)+"...")
    } else {
        t2.classed("hidden", false).text(d.targettitle)
    }
    
    t1s.classed("hidden", false).text(d.sourcestart + charoffset)
    t2s.classed("hidden", false).text(d.targetstart + charoffset)
    leftb.classed("hidden", false)
    rightb.classed("hidden", false)
    nextb.classed("hidden", false)
    prevb.classed("hidden", false)
    offlabel.classed("hidden", false)
    if (d.sourcequote.length < 75) {
        cos = d.sourcequote.length
    } else {
        cos = charoffset + 75
    }

    
    qa.text("Intertextuality ("+ charoffset+"-"+cos+" of "+ d.targetquote.length + " 字 alignment)")
    for (i = 0; i < 75; i ++){
        let selector = i + charoffset
        let onec = d3.select("#one"+i).text(d.sourcequote[selector])
        let twoc = d3.select("#two"+i).text(d.targetquote[selector])
        if (d.sourcequote[selector] == d.targetquote[selector]){
            onec.attr("fill","black")
            twoc.attr("fill","black")
        } else if (d.sourcequote[selector] == " " || d.targetquote[selector] == " ") {
            onec.attr("fill","green")
            twoc.attr("fill","green")
        } else {
            onec.attr("fill","magenta")
            twoc.attr("fill","magenta")
        }
    }
}



var quoteinfo = svg.append("g")
    .attr('transform', 'translate(' + (width/2) +
    ',' + -(height / 2)+ ')');



var qa = quoteinfo.append("text")
    .attr("x", 40)
    .attr("y", 80)
    .attr("font-size",32)
    .text("Intertextuality")



let yoffset = 0;

let xoffset = 0;

for (i = 0; i < 80; i ++){
    if (i % 15 == 0 && i > 0) {
        yoffset += 120
    }

    xoffset = (i % 15) * 32

    quoteinfo.append("text")
        .attr("font-size", 28)
        .attr("x", 40 + xoffset)
        .attr("y", 260 + yoffset)
        .attr("id", "one"+ i)
        .text("")

    quoteinfo.append("text")
        .attr("font-size", 28)
        .attr("x", 40 + xoffset)
        .attr("y", 300 + yoffset)
        .attr("id", "two"+ i)
        .text("")
}



var t1 = quoteinfo.append("text").attr("x", 40).attr("y", 160).attr("font-size",28).classed("hidden", true).text("Unknown")
var t1s = quoteinfo.append("text").attr("x",30).attr("y", 160).attr("font-size",28).attr("text-anchor","end").classed("hidden", true).text(0)
var t2 = quoteinfo.append("text").attr("x", 40).attr("y", 200).attr("font-size",28).classed("hidden", true).text("Unknown")
var t2s = quoteinfo.append("text").attr("x",30).attr("y", 200).attr("font-size",28).attr("text-anchor","end").classed("hidden", true).text(0)
var offlabel = quoteinfo.append("text").attr("x",30).attr("y", 120).attr("font-size",28).attr("text-anchor","end").classed("hidden", true).text("Offset")

var rightb = quoteinfo.append("rect")
            .attr("x", 440)
            .attr("y", 138)
            .attr("width", 60)
            .attr("height",20)
            .attr("rx", 4)
            .attr("ry", 4)
            .attr("width","60")
            .attr("height","30")
            .attr("fill","black")
            .classed("hidden", true)
            .on("click", upalignment)



quoteinfo.append("text")
    .attr("x",470)
    .attr("y",158)
    .style('font-size', "18px")
    .style("pointer-events","none")
    .attr("text-anchor","middle")
    .attr("fill","white")
    .text("Fwd.")


var leftb = quoteinfo.append("rect")
            .attr("x", 360)
            .attr("y", 138)
            .attr("width", 60)
            .attr("height",20)
            .attr("rx", 4)
            .attr("ry", 4)
            .attr("width","60")
            .attr("height","30")
            .attr("fill","black")
            .classed("hidden", true)
            .on("click", downalignment)



quoteinfo.append("text")
    .attr("x",390)
    .attr("y",158)
    .style('font-size', "18px")
    .style("pointer-events","none")
    .attr("text-anchor","middle")
    .attr("fill","white")
    .text("Back")

var nextb = quoteinfo.append("rect")
        .attr("x", 440)
        .attr("y", 172)
        .attr("width", 60)
        .attr("height",20)
        .attr("rx", 4)
        .attr("ry", 4)
        .attr("width","60")
        .attr("height","30")
        .attr("fill","black")
        .classed("hidden", true)
        .on("click", next)



quoteinfo.append("text")
    .attr("x",470)
    .attr("y",192)
    .style('font-size', "18px")
    .style("pointer-events","none")
    .attr("text-anchor","middle")
    .attr("fill","white")
    .text("Next")


var prevb = quoteinfo.append("rect")
            .attr("x", 360)
            .attr("y", 172)
            .attr("width", 60)
            .attr("height",20)
            .attr("rx", 4)
            .attr("ry", 4)
            .attr("width","60")
            .attr("height","30")
            .attr("fill","black")
            .classed("hidden", true)
            .on("click", prev)



quoteinfo.append("text")
    .attr("x",390)
    .attr("y",192)
    .style('font-size', "18px")
    .style("pointer-events","none")
    .attr("text-anchor","middle")
    .attr("fill","white")
    .text("Prev")


let charoffset = 0

function upalignment(){
    charoffset += 15
    if (currentdata.sourcequote.length > 75){
        if (charoffset > currentdata.sourcequote.length - 75) {
            charoffset = currentdata.sourcequote.length - 75;
        }
    } else {
        charoffset = 0;
    }
    
    displayquote(currentdata)
}

function downalignment(){
    charoffset -= 15
    if (charoffset< 0){
        charoffset = 0
    }
    displayquote(currentdata)
}

function next(){
    for (i = charoffset + 1; i < currentdata.sourcequote.length; i++){
        if (currentdata.sourcequote[i] != currentdata.targetquote[i]){
            charoffset = i;
            break;
        }
    }
    if (currentdata.sourcequote.length > 75){
        if (charoffset > currentdata.sourcequote.length - 75) {
            charoffset = currentdata.sourcequote.length - 75;
        }
    } else {
        charoffset = currentdata.sourcequote.length - 75;
    }
    console.log(charoffset)
    displayquote(currentdata)
}

function prev(){
    for (i = charoffset - 1; i >= 0; i--){
        if (currentdata.sourcequote[i] != currentdata.targetquote[i]){
            charoffset = i;
            break;
        } else {
            charoffset = 0;
        }
    }
    if (charoffset < 0){
        charoffset = 0
    }
    displayquote(currentdata)
}
</script>
</body>
</html>